<template>
  <van-tabs
    v-if="currentTab && tabs && tabs.length>0"
    swipeable
    animated
    :active="currentTab"
    class="enroll-tabs"
    @change="onChange"
  >
    <van-tab
      v-for="(tab,key) in tabs"
      :key="key"
      :name="tab.tabname"
      :title="tab.title"
    >
      <scroll-view
        class="scroll-container"
        v-if="tab.list && tab.list.length>0"
      >
        <column
          v-for="(item,index) in tab.list"
          :key="index"
          :format="item.format"
          :title="item.title"
          :description="item.description"
          :medias="item.medias"
          @click="pushNativelink(item.mplink)"
        />
      </scroll-view>
      <van-empty
        v-else
        description="暂无内容"
      />
    </van-tab>
  </van-tabs>
</template>

<script>
import Price from '@/components/price'
import SearchArticleList from '@/components/SearchArticleList/index'
import { getPageTabsApi } from '@/api'
import Blank from '@/components/blank'
import Column from '@/components/column/index'
import MPRequest from '@/utils/request'
export default {
  components: {
    Column,
    Price,
    SearchArticleList,
    Blank
  },
  data () {
    return {
      pageName: '',
      tabs: [],
      currentTab: '',
      showEmpty: true,
      empty: {
        title: '暂无内容',
        message: '暂无内容'
      }
    }
  },
  onLoad (option) {
    console.log('onLoad Options', option)
    this.currentTab = ''
    if (option.name) {
      this.pageName = option.name
      this.onLoadData()
    }
  },
  created () {

  },
  watch: {
    currentTab (value) {
      console.warn('currentTab Changed:', value)
      if (value) {
        this.onLoadTabList(value)
      }
    }
  },
  methods: {
    onLoadData () {
      getPageTabsApi(this.pageName).then(res => {
        this.tabs = res.map(item => {
          return {
            ...item,
            list: [],
            page: 1,
            meta: {
              totalCount: 0,
              pageCount: 0,
              currentPage: 0,
              perPage: 0
            }
          }
        })
        if (res[0]) {
          this.currentTab = res[0].tabname
        }
      })
    },
    onChange (e) {
      this.currentTab = e.mp.detail.name
    },
    onClick () {
      console.log('enlist onClick')
    },
    // 获取数据方法
    getList (index) {
      console.log('enlist getList:', index)
      let that = this.tabs[index]
      if (!that) {
        return
      }
      const tabLink = that.mplink
      let params = Object.assign({
        page: that.page
      }, tabLink.params)
      MPRequest.get(tabLink.route, params).then(res => {
        // 关闭下拉刷新动画
        wx.stopPullDownRefresh()
        // 返回的数据
        const data = res
        if (data.items) {
          let itemCount = data.items.length
          if (itemCount > 0) {
            if (that.page > 1) {
              this.tabs[index].list.push(...data.items)
            } else {
              this.tabs[index].list = data.items
            }
          }
          this.tabs[index].meta = data.meta
        }
      }).catch(e => {
        console.log(e)
      })
    },
    onLoadTabList () {
      for (let i = this.tabs.length; i--;) {
        if (this.tabs[i].tabname === this.currentTab) {
          if (this.tabs[i].list.length === 0) {
            this.getList(i)
          }
          break
        }
      }
    }
  },
  // 上拉加载
  onReachBottom: function () {
    for (let i = this.tabs.length; i--;) {
      if (this.tabs[i].tabname === this.currentTab) {
        let activeTab = this.tabs[i]
        // 执行上拉执行的功能
        if (activeTab.meta.pageCount <= activeTab.meta.currentPage) {
          console.log('数据加载完了')
        } else {
          this.tabs[i].page += 1
          // 下一页
          this.getList(i)
        }
        break
      }
    }
  },
  // 停止下拉刷新
  async onPullDownRefresh () {
    for (let i = this.tabs.length; i--;) {
      if (this.tabs[i].tabname === this.currentTab) {
        this.tabs[i].page = 1
        // 初始化页码
        this.getList(i)
        break
      }
    }
    // to doing..
    // 停止下拉刷新
    wx.stopPullDownRefresh()
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.scroll-container {
  position: relative;
  min-height: 100vh;
}
.enroll-tabs {
  .van-tabs {
    height: 100%;
    padding-top: 44px;
    background: #f1f2f3;
    .van-sticky {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }
    &__content {
      min-height: 100%;
      background: #f1f2f3;
    }
  }
  .van-tab__pane {
    .empty {
      position: relative;
      background: transparent;
    }
  }
}
</style>
